<!DOCTYPE html>
<html lang=zh>
<head>
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="简述组件是Angular 2 众多好的理念之一。
在Angular apps中，我们使用HTML的标签来编写我们的互动应用。但是浏览器只理解一些标签，像或者等一些浏览器创建者定义的标签。
我们如何让浏览器认识新的标签呢？如果我们想使用标签来展示天气怎么办？又或者我们想使用标签来创建一个登录面板？我们可以使用Angular的组件，组件可以让浏览器认识我们定制的标签。
创建组件的命令让我们来创建第一个">
<meta property="og:type" content="article">
<meta property="og:title" content="Angular 2 中的组件（一）">
<meta property="og:url" content="http://www.sithome.vip/2017/01/27/angular2-component-1/index.html">
<meta property="og:site_name" content="SitHome">
<meta property="og:description" content="简述组件是Angular 2 众多好的理念之一。
在Angular apps中，我们使用HTML的标签来编写我们的互动应用。但是浏览器只理解一些标签，像或者等一些浏览器创建者定义的标签。
我们如何让浏览器认识新的标签呢？如果我们想使用标签来展示天气怎么办？又或者我们想使用标签来创建一个登录面板？我们可以使用Angular的组件，组件可以让浏览器认识我们定制的标签。
创建组件的命令让我们来创建第一个">
<meta property="og:updated_time" content="2017-02-07T03:53:21.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Angular 2 中的组件（一）">
<meta name="twitter:description" content="简述组件是Angular 2 众多好的理念之一。
在Angular apps中，我们使用HTML的标签来编写我们的互动应用。但是浏览器只理解一些标签，像或者等一些浏览器创建者定义的标签。
我们如何让浏览器认识新的标签呢？如果我们想使用标签来展示天气怎么办？又或者我们想使用标签来创建一个登录面板？我们可以使用Angular的组件，组件可以让浏览器认识我们定制的标签。
创建组件的命令让我们来创建第一个">
    
    
        
          
              <link rel="shortcut icon" href="/images/favicon.ico">
          
        
        
          
            <link rel="icon" type="image/png" href="/images/favicon-192x192.png" sizes="192x192">
          
        
        
          
            <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
          
        
    
    <!-- title -->
    <title>Angular 2 中的组件（一）</title>
    <!-- styles -->
    <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/lib/meslo-LG/styles.css">
    <link rel="stylesheet" href="/lib/justified-gallery/justifiedGallery.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <!-- rss -->
    
    
    <!-- jquery -->
    <script src="/lib/jquery/jquery.min.js"></script>
</head>

<body>
    
      <div id="header-post">
  <a id="menu-icon" href="#"><i class="fa fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#"><i class="fa fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fa fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
        
          <li><a href="/">主页</a></li>
        
          <li><a href="/about/">关于</a></li>
        
          <li><a href="/archives/">文章</a></li>
        
          <li><a href="https://git.oschina.net/sithome">码云</a></li>
        
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" href="/2017/02/04/angular2-component-2/"><i class="fa fa-chevron-left" aria-hidden="true" onmouseover='$("#i-prev").toggle();' onmouseout='$("#i-prev").toggle();'></i></a></li>
        
        
        <li><a class="icon" href="/2017/01/26/first-angular2-app/"><i class="fa fa-chevron-right" aria-hidden="true" onmouseover='$("#i-next").toggle();' onmouseout='$("#i-next").toggle();'></i></a></li>
        
        <li><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa fa-chevron-up" aria-hidden="true" onmouseover='$("#i-top").toggle();' onmouseout='$("#i-top").toggle();'></i></a></li>
        <li><a class="icon" href="#"><i class="fa fa-share-alt" aria-hidden="true" onmouseover='$("#i-share").toggle();' onmouseout='$("#i-share").toggle();' onclick='$("#share").toggle();return false;'></i></a></li>
      </ul>
      <span id="i-prev" class="info" style="display:none;">Previous post</span>
      <span id="i-next" class="info" style="display:none;">Next post</span>
      <span id="i-top" class="info" style="display:none;">Back to top</span>
      <span id="i-share" class="info" style="display:none;">Share post</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
  <li><a class="icon" href="http://www.facebook.com/sharer.php?u=http://www.sithome.vip/2017/01/27/angular2-component-1/"><i class="fa fa-facebook " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://twitter.com/share?url=http://www.sithome.vip/2017/01/27/angular2-component-1/&text=Angular 2 中的组件（一）"><i class="fa fa-twitter " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=http://www.sithome.vip/2017/01/27/angular2-component-1/&title=Angular 2 中的组件（一）"><i class="fa fa-linkedin " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=http://www.sithome.vip/2017/01/27/angular2-component-1/&is_video=false&description=Angular 2 中的组件（一）"><i class="fa fa-pinterest " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=Angular 2 中的组件（一）&body=Check out this article: http://www.sithome.vip/2017/01/27/angular2-component-1/"><i class="fa fa-envelope " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://getpocket.com/save?url=http://www.sithome.vip/2017/01/27/angular2-component-1/&title=Angular 2 中的组件（一）"><i class="fa fa-get-pocket " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://reddit.com/submit?url=http://www.sithome.vip/2017/01/27/angular2-component-1/&title=Angular 2 中的组件（一）"><i class="fa fa-reddit " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.stumbleupon.com/submit?url=http://www.sithome.vip/2017/01/27/angular2-component-1/&title=Angular 2 中的组件（一）"><i class="fa fa-stumbleupon " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://digg.com/submit?url=http://www.sithome.vip/2017/01/27/angular2-component-1/&title=Angular 2 中的组件（一）"><i class="fa fa-digg " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.tumblr.com/share/link?url=http://www.sithome.vip/2017/01/27/angular2-component-1/&name=Angular 2 中的组件（一）&description="><i class="fa fa-tumblr " aria-hidden="true"></i></a></li>
</ul>

    </div>
    <div id="toc">
      <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#简述"><span class="toc-number">1.</span> <span class="toc-text">简述</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#创建组件的命令"><span class="toc-number">2.</span> <span class="toc-text">创建组件的命令</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#组件TypeScript文件中的内容"><span class="toc-number">3.</span> <span class="toc-text">组件TypeScript文件中的内容</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#导入依赖"><span class="toc-number">3.1.</span> <span class="toc-text">导入依赖</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Component-注释"><span class="toc-number">3.2.</span> <span class="toc-text">Component 注释</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#加载组件"><span class="toc-number">4.</span> <span class="toc-text">加载组件</span></a></li></ol>
    </div>
  </span>

</div>

    
    <div class="content index width mx-auto px2 my4">
        
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle" itemprop="name headline">
        Angular 2 中的组件（一）
    </h1>



    <div class="meta">
      <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">SitHome</span>
      </span>
      
    <div class="postdate">
        <time datetime="2017-01-27T06:48:25.000Z" itemprop="datePublished">2017-01-27</time>
    </div>


      

    </div>
  </header>
  

  <div class="content" itemprop="articleBody">
    <h1 id="简述"><a href="#简述" class="headerlink" title="简述"></a>简述</h1><p>组件是Angular 2 众多好的理念之一。</p>
<p>在Angular apps中，我们使用HTML的标签来编写我们的互动应用。但是浏览器只理解一些标签，像<select>或者<form>等一些浏览器创建者定义的标签。</form></select></p>
<p>我们如何让浏览器认识新的标签呢？如果我们想使用<weather>标签来展示天气怎么办？又或者我们想使用<login>标签来创建一个登录面板？我们可以使用Angular的组件，组件可以让浏览器认识我们定制的标签。</login></weather></p>
<h1 id="创建组件的命令"><a href="#创建组件的命令" class="headerlink" title="创建组件的命令"></a>创建组件的命令</h1><p>让我们来创建第一个component，当我们创建好这个component，我们将能够在HTML文档中使用它，如下所示：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;app-hello-world&gt;&lt;/app-hello-world&gt;</div></pre></td></tr></table></figure>
<p>可以使用angular-cli的generate命令创建component，使用下面的命令我们可以创建一个名为hello-world的component，命令如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ ng generate component hello-world</div></pre></td></tr></table></figure>
<p>从输出结果可以看出创建了哪些文件，结果如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">installing component</div><div class="line">  create src/app/hello-world/hello-world.component.css</div><div class="line">  create src/app/hello-world/hello-world.component.html</div><div class="line">  create src/app/hello-world/hello-world.component.spec.ts</div><div class="line">  create src/app/hello-world/hello-world.component.ts</div><div class="line">  update src/app/app.module.ts</div></pre></td></tr></table></figure>
<p>名为hello-world.component.ts的TypeScript文件定义了一个组件。用编辑器打开内容如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line">import &#123; Component, OnInit &#125; from &apos;@angular/core&apos;;</div><div class="line"></div><div class="line">@Component(&#123;</div><div class="line">  selector: &apos;app-hello-world&apos;,</div><div class="line">  templateUrl: &apos;./hello-world.component.html&apos;,</div><div class="line">  styleUrls: [&apos;./hello-world.component.css&apos;]</div><div class="line">&#125;)</div><div class="line">export class HelloWorldComponent implements OnInit &#123;</div><div class="line"></div><div class="line">  constructor() &#123; &#125;</div><div class="line"></div><div class="line">  ngOnInit() &#123;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>一个基本的组件有两部分：</p>
<ol>
<li>一个组件注释</li>
<li>一个组件定义类</li>
</ol>
<h1 id="组件TypeScript文件中的内容"><a href="#组件TypeScript文件中的内容" class="headerlink" title="组件TypeScript文件中的内容"></a>组件TypeScript文件中的内容</h1><p>如果之前不了解TypeScript语言，则hello-world.component.ts文件中内容看起来可能头大，但是不用担心，下面一步一步的说一下。</p>
<h2 id="导入依赖"><a href="#导入依赖" class="headerlink" title="导入依赖"></a>导入依赖</h2><p>hello-world.component.ts文件开始的import语句定义了我们写代码时需要用到的模块。文件中的 import语句从”@anaular/core”模块导入了：Component和OnInit。import语句的格式如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">import &#123;导入的内容&#125; from 模块</div></pre></td></tr></table></figure>
<p>在导入语句中{}的意思是解构，解构是TypeScript和ES6提供的特性，以后的章节会深入的探讨。</p>
<h2 id="Component-注释"><a href="#Component-注释" class="headerlink" title="Component 注释"></a>Component 注释</h2><p>导入过依赖之后，我们需要声明组件。hello-world.component.ts文件中下面的代码就是Component注释：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">@Component(&#123;</div><div class="line">  selector: &apos;app-hello-world&apos;,</div><div class="line">  templateUrl: &apos;./hello-world.component.html&apos;,</div><div class="line">  styleUrls: [&apos;./hello-world.component.css&apos;]</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>当使用@Component注释在HelloWorldComponent类上时代表声明HelloWorldComponent是一个组件。</p>
<p>注释中的selector: ‘app-hello-world’代码可以让我们通过<app-hello-world></app-hello-world>标签来访问到组件。</p>
<p>注释中templateUrl: ‘./hello-world.component.html’代码的意思是：标签<app-hello-world>解析时会使用’./hello-world.component.html’中的代码。可以看一下hello-world.component.html文件的内容：</app-hello-world></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&lt;p&gt;</div><div class="line">  hello-world works!</div><div class="line">&lt;/p&gt;</div></pre></td></tr></table></figure>
<p>声明注释时我们有两种方式定义模板，使用templateUrl或者template。上面注释的声明就是使用的templateUrl，使用template的方式如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">@Component(&#123;</div><div class="line">  selector: &apos;app-hello-world&apos;,</div><div class="line">  template: `</div><div class="line">    &lt;p&gt;</div><div class="line">        hello-world works inline!</div><div class="line">    &lt;/p&gt;`,</div><div class="line">  styleUrls: [&apos;./hello-world.component.css&apos;]</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p><em>注：定义tmplate的值时需要在将内容放入反引号中,反引号的语法是在ES6中引入的用来支持多行字符串。</em></p>
<p>至于是用template还是templateUrl，根据单一职责原则，建议使用templateUrl。</p>
<p>注释中styleUrls: [‘./hello-world.component.css’]代表组件被渲染时将使用hello-world.component.css文件中定义的样式。Angular 2有一个概念叫样式封装，意思就是样式被指定到特定的组件上时它只能仅仅对这一组件起作用。以后会有样式封装更深入的讨论。styleUrls和template的值有不同，styleUrls的值可以是数组，这样我们就可以使用多个样式来渲染一个组件。</p>
<h1 id="加载组件"><a href="#加载组件" class="headerlink" title="加载组件"></a>加载组件</h1><p>创建组件之后，如果我们立即在浏览器里访问我们的应用，你会发现没有什么变化。这是因为你只创建了组件，而没有使用它。</p>
<p>我们需要将组件标签增加到已经可以被浏览器渲染的模板中。我们可以将<app-hello-world></app-hello-world>标签放入src/app/app.component.html中，因为app.component.html文件是index.html中<app-root>标签对应的模板文件。修改后的app.component.html如下：</app-root></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">&lt;h1&gt;</div><div class="line">  &#123;&#123;title&#125;&#125;</div><div class="line">  &lt;app-hello-world&gt;&lt;/app-hello-world&gt;</div><div class="line">&lt;/h1&gt;</div></pre></td></tr></table></figure>
<p>这时使用浏览器访问我们的应用看到的如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">app works!</div><div class="line">hello-world works!</div></pre></td></tr></table></figure>
<p>自定义的组件已经很好的在浏览器里工作了，后面组件（二）会添加一些数据在组件里看看是什么效果。</p>

  </div>
</article>

    <div class="weixin">
      <p>欢迎关注微信SitHomeBing，互相交流学习</p>
      <p><img src="http://okhdvenip.bkt.clouddn.com/qrcode8.jpg" alt="SitHomeBing" title="微信扫二维码关注"></p>
    </div>





<!-- 多说评论框 start -->
	<div class="ds-thread" data-thread-key="2017/01/27/angular2-component-1/" data-title="Angular 2 中的组件（一）" data-url="http://www.sithome.vip/2017/01/27/angular2-component-1/"></div>
<!-- 多说评论框 end -->



    </div>
    
      <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
         
          <li><a href="/">主页</a></li>
         
          <li><a href="/about/">关于</a></li>
         
          <li><a href="/archives/">文章</a></li>
         
          <li><a href="https://git.oschina.net/sithome">码云</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#简述"><span class="toc-number">1.</span> <span class="toc-text">简述</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#创建组件的命令"><span class="toc-number">2.</span> <span class="toc-text">创建组件的命令</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#组件TypeScript文件中的内容"><span class="toc-number">3.</span> <span class="toc-text">组件TypeScript文件中的内容</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#导入依赖"><span class="toc-number">3.1.</span> <span class="toc-text">导入依赖</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Component-注释"><span class="toc-number">3.2.</span> <span class="toc-text">Component 注释</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#加载组件"><span class="toc-number">4.</span> <span class="toc-text">加载组件</span></a></li></ol>
    </div>

    <div id="share-footer" style="display: none">
      <ul>
  <li><a class="icon" href="http://www.facebook.com/sharer.php?u=http://www.sithome.vip/2017/01/27/angular2-component-1/"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://twitter.com/share?url=http://www.sithome.vip/2017/01/27/angular2-component-1/&text=Angular 2 中的组件（一）"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=http://www.sithome.vip/2017/01/27/angular2-component-1/&title=Angular 2 中的组件（一）"><i class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=http://www.sithome.vip/2017/01/27/angular2-component-1/&is_video=false&description=Angular 2 中的组件（一）"><i class="fa fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=Angular 2 中的组件（一）&body=Check out this article: http://www.sithome.vip/2017/01/27/angular2-component-1/"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://getpocket.com/save?url=http://www.sithome.vip/2017/01/27/angular2-component-1/&title=Angular 2 中的组件（一）"><i class="fa fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://reddit.com/submit?url=http://www.sithome.vip/2017/01/27/angular2-component-1/&title=Angular 2 中的组件（一）"><i class="fa fa-reddit fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.stumbleupon.com/submit?url=http://www.sithome.vip/2017/01/27/angular2-component-1/&title=Angular 2 中的组件（一）"><i class="fa fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://digg.com/submit?url=http://www.sithome.vip/2017/01/27/angular2-component-1/&title=Angular 2 中的组件（一）"><i class="fa fa-digg fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.tumblr.com/share/link?url=http://www.sithome.vip/2017/01/27/angular2-component-1/&name=Angular 2 中的组件（一）&description="><i class="fa fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
</ul>

    </div>

    <div id="actions-footer">
      <ul>
        <li id="toc"><a class="icon" href="#" onclick='$("#toc-footer").toggle();return false;'><i class="fa fa-list fa-lg" aria-hidden="true"></i> TOC</a></li>
        <li id="share"><a class="icon" href="#" onclick='$("#share-footer").toggle();return false;'><i class="fa fa-share-alt fa-lg" aria-hidden="true"></i> Share</a></li>
        <li id="top" style="display:none"><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa fa-chevron-up fa-lg" aria-hidden="true"></i> Top</a></li>
        <li id="menu"><a class="icon" href="#" onclick='$("#nav-footer").toggle();return false;'><i class="fa fa-bars fa-lg" aria-hidden="true"></i> Menu</a></li>
      </ul>
    </div>

  </div>
</div>

    
    <footer id="footer">
  <div class="footer-left">
    Copyright &copy; 2017 SitHome
  </div>
  <div class="footer-right">
    <nav>
      <ul>
         
          <li><a href="/">主页</a></li>
         
          <li><a href="/about/">关于</a></li>
         
          <li><a href="/archives/">文章</a></li>
         
          <li><a href="https://git.oschina.net/sithome">码云</a></li>
        
      </ul>
    </nav>
  </div>
</footer>

    <script src="/lib/justified-gallery/jquery.justifiedGallery.min.js"></script>
<script src="/js/main.js"></script>
<!-- Google Analytics -->
<!--

    <script type="text/javascript">
        (function(i,s,o,g,r,a,m) {i['GoogleAnalyticsObject']=r;i[r]=i[r]||function() {
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        ga('create', 'UA-86660611-1', 'auto');
        ga('send', 'pageview');
    </script>

-->
<!-- Disqus Comments -->


<!--duoshuo comments-->

  <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
  <script type="text/javascript">
  var duoshuo_shortname = 'sithome';
  var duoshuoQuery = {short_name:duoshuo_shortname};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0]
       || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
  <!-- 多说公共JS代码 end -->


</body>
</html>
